<template>
    <div class="body tishi">
        <div class="tx_box">
            <h1>
                <img
                    v-show="status"
                    src="../../assets/images/renz_icon_chenggd.png"
                    alt=""
                />
                <img
                    v-show="!status"
                    src="../../assets/images/gg_icon_shibai.png"
                    alt=""
                />
            </h1>
            <h2 v-show="status">订单支付成功！</h2>
            <h2 v-show="!status">抱歉订单支付失败！</h2>
            <h3><span>订单号：</span> {{ checkInfo.order_sn }}</h3>
            <h3>
                <span>付款金额：</span> {{ checkInfo.order_amount | money }}元
            </h3>
            <dl>
                <dd @click="$router.push('/shop')">订单详情</dd>
                <dt @click="$router.push('/shop')">继续购物</dt>
            </dl>
        </div>
        <div class="zhanwei"></div>
    </div>
</template>

<script>
import { axiosPost } from '../../axios';
import { Toast } from 'vant';
export default {
    name: '',
    data() {
        return {
            status: true,

            checkInfo: {},
        };
    },
    computed: {},
    mounted() {
        this.getInfo();
    },
    methods: {
        // 获取分类
        getInfo() {
            axiosPost(
                '/api/order/check',
                {
                    order_sn: this.$route.query.merOrderId,
                },
                (res) => {
                    // console.log(res);
                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }
                    this.checkInfo = res.data;

                    
                    if (res.data.pay_status == 1) {
                        this.status = true;
                    } else {
                        this.status = false;
                    }
                }
            );
        },
    },
};
</script>

<style lang="less" scope>
.tishi {
    .tx_box {
        width: 15.1467rem;
        height: 15.1467rem;
        background: #ffffff;
        border-radius: 0.4267rem;
        margin: 0.4267rem auto;
        overflow: hidden;

        h1 {
            width: 2.1333rem;
            height: 2.1333rem;
            margin: 3.0507rem auto 1.0667rem;

            img {
                width: 100%;
            }
        }

        h2 {
            font-size: 0.8107rem;
            font-weight: 500;
            color: #000000;
            line-height: 0.64rem;
            text-align: center;
            margin-bottom: 0.4rem;
        }

        h3 {
            font-size: 0.64rem;
            font-weight: 400;
            color: #999999;
            line-height: 1.1733rem;
            width: 10rem;
            margin: 0 auto;
        }

        dl {
            display: flex;
            justify-content: center;
            align-content: center;
            margin-top: 0.8533rem;

            dd,
            dt {
                width: 5.5467rem;
                height: 1.7067rem;
                border: 1px solid #ff3b3b;
                border-radius: 0.8533rem;
                line-height: 1.7067rem;
                text-align: center;
                font-size: 0.64rem;
                font-weight: 400;
            }

            dd {
                color: #ff3b3b;
            }

            dt {
                margin-left: 0.8533rem;
                color: #fff;
                background: #ff3b3b;
            }
        }
    }
}
</style>
